<nz-modal [(nzVisible)]="visible" [nzTitle]="userDto.id ? '修改用户' : '新增用户'" [nzMaskClosable]="false"
  (nzOnCancel)="onCancel()" [nzFooter]="nzModalFooter" nzWidth="500">
  <form nz-form #form="ngForm">
    <nz-form-item class="mb-md">
      <nz-form-control nzErrorTip="请输入姓名！"
        [nzValidateStatus]="name.invalid && (name.dirty || name.touched) ? 'error' : ''" nzHasFeedback>
        <nz-input-group nzPrefixIcon="anticon anticon-user">
          <input #name="ngModel" autocomplete="off" nz-input [(ngModel)]="userDto.name" name="name" placeholder="姓名"
            required />
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>
    <!-- 
    <nz-form-item class="mb-md">
      <nz-form-control
        nzErrorTip="请选择学校！"
        [nzValidateStatus]="school.invalid && (school.dirty || school.touched) ? 'error' : ''"
        nzHasFeedback
      >
        <app-school-select #school="ngModel" name="school" required [(ngModel)]="userDto.school.id"> </app-school-select>
      </nz-form-control>
    </nz-form-item> -->

    <nz-form-item class="mb-md">
      <nz-form-control [nzErrorTip]="erroremail"
        [nzValidateStatus]="mail.invalid && (mail.dirty || mail.touched) ? 'error' : ''" nzHasFeedback>
        <nz-input-group nzPrefixIcon="anticon anticon-mail">
          <input #mail="ngModel" autocomplete="off" nz-input nzFor="email" [(ngModel)]="userDto.mail" name="mail"
            placeholder="邮箱" [userId]="userDto.id" app-async-email-validator required email />
        </nz-input-group>
        <ng-template #erroremail let-control>
          <ng-container *ngIf="mail.hasError('required')">
            请输入邮箱!
          </ng-container>
          <ng-container *ngIf="mail.hasError('email')">
            请输入正确邮箱!
          </ng-container>
          <ng-container *ngIf="mail.hasError('nameExists')">
            邮箱已被占用!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item class="mb-md">
      <nz-form-control [nzErrorTip]="erroridcard"
        [nzValidateStatus]="idCard.invalid && (idCard.dirty || idCard.touched) ? 'error' : ''" nzHasFeedback>
        <nz-input-group nzPrefixIcon="anticon anticon-idcard">
          <input #idCard="ngModel" autocomplete="off" nz-input nzFor="idCard" [(ngModel)]="userDto.idCard" name="idcard"
            placeholder="身份证" required />
        </nz-input-group>
        <ng-template #erroridcard let-control>
          <ng-container *ngIf="idCard.hasError('required')">
            请输入身份证!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>


    <nz-form-item class="mb-md">
      <nz-form-control [nzErrorTip]="errormajor"
        [nzValidateStatus]="major.invalid && (major.dirty || major.touched) ? 'error' : ''" nzHasFeedback>
        <nz-input-group nzPrefixIcon="anticon anticon-read">
          <input #major="ngModel" autocomplete="off" nz-input nzFor="major" [(ngModel)]="userDto.major" name="major"
            placeholder="就读专业" required />
        </nz-input-group>
        <ng-template #errormajor let-control>
          <ng-container *ngIf="major.hasError('required')">
            请输入就读专业!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item class="mb-md">
      <nz-form-control [nzErrorTip]="erroreducational_institutions"
        [nzValidateStatus]="educational_institutions.invalid && (educational_institutions.dirty || educational_institutions.touched) ? 'error' : ''"
        nzHasFeedback>
        <nz-input-group nzPrefixIcon="anticon anticon-bank">
          <input #educational_institutions="ngModel" autocomplete="off" nz-input nzFor="educational_institutions"
            [(ngModel)]="userDto.educational_institutions" name="educational_institutions" placeholder="就读院校"
            required />
        </nz-input-group>
        <ng-template #erroreducational_institutions let-control>
          <ng-container *ngIf="educational_institutions.hasError('required')">
            请输入就读院校!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item class="mb-md">
      <nz-form-control [nzErrorTip]="erroregrade"
        [nzValidateStatus]="grade.invalid && (grade.dirty || grade.touched) ? 'error' : ''" nzHasFeedback>
        <nz-input-group nzPrefixIcon="anticon anticon-bank">
          <input #grade="ngModel" autocomplete="off" nz-input nzFor="grade" [(ngModel)]="userDto.grade" name="grade"
            placeholder="年级" required />
        </nz-input-group>
        <ng-template #erroregrade let-control>
          <ng-container *ngIf="grade.hasError('required')">
            请输入年级!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item class="mb-md">
      <nz-form-control [nzErrorTip]="erroraccout"
        [nzValidateStatus]="account.invalid && (account.dirty || account.touched) ? 'error' : ''" nzHasFeedback>
        <nz-input-group nzPrefixIcon="anticon anticon-user">
          <input #account="ngModel" autocomplete="off" nz-input [(ngModel)]="userDto.account" name="account"
            [userId]="userDto.id" app-async-account-validator placeholder="登录名" required />
        </nz-input-group>
        <ng-template #erroraccout let-control>
          <ng-container *ngIf="account.hasError('required')">
            请输入登录名!
          </ng-container>
          <ng-container *ngIf="account.hasError('nameExists')">
            登录名已被占用!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control [nzErrorTip]="errorTpl"
        [nzValidateStatus]="password.invalid && (password.dirty || password.touched) ? 'error' : ''" nzHasFeedback>
        <nz-input-group nzPrefixIcon="anticon anticon-lock">
          <input #password="ngModel" autocomplete="off" nz-input style="height: 38px;" type="password"
            [(ngModel)]="userDto.password" name="password" placeholder="密码" required />
        </nz-input-group>
        <app-password-strength [password]="userDto.password" [(level)]="level"></app-password-strength>
        <ng-template #errorTpl let-control>
          <ng-container *ngIf="password.hasError('required')">
            应请填写最少8位密码!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
  </form>
  <ng-template #nzModalFooter>
    <button nz-button nzType="default" (click)="onCancel()">取消</button>
    <button nz-button nzType="primary" [nzLoading]="loading" (click)="validate(true)"
      [acl]="['USER_CREATE', 'USER_UPDATE']">
      确定
    </button>
  </ng-template>
</nz-modal>
